<template>
  <el-form :rules="rules" :model="formModel" ref="roleAuthorizationForm" :show-message='config.isShowMessage'>
    <el-form-item label="Domain ID or Group Name:" prop="domainIdOrGroupName" :label-width="config.itemLabelWidth"
                  :size="config.itemSize" class="form-item">
      <el-input v-model="formModel.domainIdOrGroupName" :size="config.inputSize"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>

export default {
  components: {},
  props: {
    roleAuthorizationTableData: {
      type: Array
    }
  },

  data() {
    let validateDuplicateName = (rule, inputedStr, callback) => {
      let domainIdOrGroupNameArray = this.roleAuthorizationTableData.map(item => item.userName)
      if (inputedStr === undefined || inputedStr.trim() === '') {
        callback(new Error('Duplicate name'))
      } else if (domainIdOrGroupNameArray.includes(inputedStr.toUpperCase())) {
        callback(new Error('Duplicate name'))
      } else {
        callback()
      }
    }

    return {
      config: {
        itemLabelWidth: '220px',
        itemSize: 'mini',
        inputSize: 'mini',
        isShowMessage: false
      },
      formModel: {},
      rules: {
        domainIdOrGroupName: [
          {required: true, validator: validateDuplicateName, trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    setFormModel(formModel) {
      this.formModel = formModel
    },
    getFormModel() {
      return this.formModel
    },
    getValidateResult() {
      let isValidate = true
      this.$refs['roleAuthorizationForm'].validate((valid) => {
        isValidate = valid
      })
      return isValidate
    }
  }
}
</script>
